<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>中国共产党</title>
	<!-- 引入 ElementUI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<!-- 引入 ElementUI 组件库，会注入全局变量 -->
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script type="text/javascript" src="jquery.js"></script>
	<script src="jquery.timelinr-0.9.4.js" type="text/javascript"></script>
	<script src="/node_modules/_axios@0.21.1@axios/dist/axios.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/styles.css" />
	<script src="echarts.js"></script>
	<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.3/dist/g6.min.js"></script>
	<script src="peopleData.js"></script>
	<!-- <script src="bmap.js"></script>
	<script src="http://api.map.baidu.com/api?v=2.0&ak=B3D3QQeLX9FTqvrh3rte5c0XRxPLRfN1"></script> -->
</head>

<body>
	<div id="app">
		<el-row :gutter="5">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="6">
				<div id="page">
					<button @click="changeMode">播放</button>
					<!-- <div class="demotips"><a href="index.html">演示一</a><a href="demo2.html">演示二</a></div> -->
					<div id="container" class="content clearfix">
						<div id="timeline">
							<ul id="dates">
								<li v-for="(item,index) in event_list_data" :key="index">
									<a :href="'#'+getYear(item.time)"
									@click="updateData(item, index)"><span>{{getYear(item.time)}}</span></a>
								</li>
								<!-- <li><a href="#1990" onclick="console.log(90)">1900</a></li> -->
							</ul>
							<ul id="issues">
								<li v-for="(item,index) in event_list_data" :key="index" :id="item.time">
									<img :src="getImagePath(item)" width="188" height="224" />
									<h1>{{item.events}}</h1>
									<p>{{item.bref}}</p>
								</li>
		
								<!-- <li id="1900">
							<img src="images/1.png" width="256" height="256" />
							<h1>1900</h1>
							<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p>
						</li> -->
		
							</ul>
							<div id="grad_left"></div>
							<div id="grad_right"></div>
							<a href="#" id="next">+</a>
							<a href="#" id="prev">-</a>
						</div>
					</div>
				</div>
			</el-col>
			
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="18">
				<div id="mapcontainer"></div>
			</el-col>
			
			<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
				<div id="net"></div>
			</el-col>
			
		</el-row>
	
		
	</div>
</body>
<script src="vueMain.js"></script>

</html>